<template>
  <div class="vx-form">
    <small-title :isPlain="isPlain">
      <p>{{ title }}</p>
    </small-title>
    <slot></slot>
  </div>
</template>
<script>
import smallTitle from '@/components/vx-small-title';

export default {
  name: 'vx-form',
  components: {
    smallTitle,
  },
  props: {
    title: {
      default: '',
      type: String,
    },
    isPlain: {
      default: false,
      type: Boolean,
    },
  },
};
</script>

<style lang="scss">
.vx-form {
  // 开户银行 小图标
  .vx-form_search {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-top: 5px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  // 单笔转账付款金额手续费
  .form-notice {
    line-height: 26px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    p {
      width: 100%;
    }
    .formality-class {
      color: #606266;
      font-size: 12px;
      .iconPosition {
        margin-top: 12px;
        color: $color-text-hover;
      }
    }
  }
  .ui-radio__label {
    padding-left: 8px;
  }
  .ui-input__icon {
    height: 32px;
    line-height: 32px;
  }
  // 单选框选中样式
  .ui-radio__input.is-checked {
    .ui-radio__inner {
      border-color: $color-primary !important;
      background: #fff;
      &::after {
        background: #fff;
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }
    }
    + .ui-radio__label {
      color: $color-text-main;
    }
  }
  .ui-form-item__label {
    line-height: 40px;
    text-align: right;
  }
  .ui-input__inner {
    line-height: 40px;
    border-radius: 2px !important;
    border: solid 1px $color-border-1 !important;
  }
  .ui-form-item__label,
  .ui-form-item__content {
    color: $color-text-main;
    font-size: 14px;
    display: inline-block;
    float: none;
    vertical-align: middle;
  }
  .ui-form-item__content {
    line-height: 40px;
    vertical-align: top;
    text-align: left;
    height: auto !important;
  }
  .ui-form-item__content {
    margin-left: 0px !important;
  }
  text-align: center;
  .ui-input {
    .ui-select__caret {
      color: #a9a8ae;
    }
  }
  .ui-select {
    .ui-input {
      .ui-select__caret {
        color: #a9a8ae;
      }
    }
    .ui-input__inner {
      width: 300px;
      height: 40px;
      border-color: rgba(217, 217, 217, 1);
      color: $color-text-main;
    }
  }
  .ui-input__inner,
  .ui-form-item__content {
    width: 300px;
    height: 40px;
    border-color: rgba(217, 217, 217, 1);
    color: $color-text-main;
    .ui-range-editor {
      width: 100%;
    }
    .default-btn {
      width: 120px;
    }
    .ui-button + .ui-button {
      margin-left: 30px;
    }
  }
}
</style>
